*{
    margin: 0;padding:0;
    list-style: none;
    text-decoration: none;
}
//body{
//  background: #f7f7f7;
//}
@mixin Body{
    display: flex;
    justify-content: center;
}
#wrap{
    width:100%;
    height:100%;
    cursor:wait;
    position: relative;
}
nav{
    width:100%;
    height:40px;
    background: #f6f6f6;
    @include Body;
    border-bottom: 2px solid #ccc;
    .nav1{
    width:90%;
    height:100%;
    display: flex;
    justify-content: space-between;
    #left{
        width:20%;
        height:100%;
        ul{
            width:100%;
            height:100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .li1{
                color:#118899;
            }
            a{
                 color: #666666; 
            }
            a:hover{
               text-decoration:underline; 
            }
            li{
                color: #666666;
            }
          }
        }
    #right{
        width:48%;
        height:100%;
        ul{
            width:100%;
            height:100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                color:#d2d2d2;
                font-size: 14px;
            }
            a{
                color:#666666;
            }
            a:hover{
               text-decoration:underline; 
            }
            .aa{
                color:red;
            }
          }
        }
     }
}

    .section0{
        width:400px;
        height:300px;
        background: skyblue;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin: auto;
        display: none;
        z-index:100;
    }
    .section1{
        width:100%;
        height:60px;
        @include Body;
        margin-top: 20px;
        img{
            width: 20%;
        }
        .sec{
            width:90%;
            height:100%;
            display: flex;
            justify-content: space-between;
        }
        ul{
            width:50%;
            height:100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                width:90px;
                height:35px;
                color:black;
                @include Body;
                align-items: center;
                &:hover{
                    background: #ccc;
                }
            }
        }
    }
    .section2{
        width:100%;
        @include Body;
        margin-top: 10px;
        .sec{
            width:90%;
             position:relative; 
            img{
                width:100%; 
            }
            ul{
                width:20%;
                height:100%;
//              background:rgba(0,0,0,0.5);
                background: #4b4a48;
                position: absolute;
                left:0;top:0;
                opacity: 1;
                img{
                    width:19.7%;
                }
                li{
                    width:100%;
                    height:25%;
                    font-size: 18px;
                    color:white;
                    padding-left: 20px;
                    border-bottom: 1px solid white;
                    &:hover{
                        background: grey;
                    }
                }
            }  
        }  
    }
    .section3{
        width:100%;
        display: flex;
        justify-content: center;
        .nav{
            width:90%;
            ul{
                width:100%;
                display: flex;
                li{
                    width:25%;
                    background: #ffffff;
                }
            }
        }
    }
    .section4{
        width:100%;
        @include Body;
        margin-top: 20px;
        .nav{
           width:90%;
           .div1{
               display: flex;
               justify-content: space-between;
              a{
                  margin-top:20px;
                  color:black;
                }
            }
           .div2{
                  width:100%;
                  display: flex;
//                justify-content: space-between;
                  img{
                      width: 20%;
                  }
                  .aa{
                      width:80%;
                      ul{
                         width:100%;
                         display: flex;
                         justify-content: space-between;
                         li{
                             width:20%;
                             height:300px;
                             display: flex;
                             align-items: center;
                             border-right: 1px solid #ccc;
//                           background: red;
                             img{
                                 width:100%;
                             }
                         }
                      } 
                  }
                  
              }
            .div3{
               display: flex;
               justify-content: space-between;
              a{
                  margin-top:20px;
                  color:black;
                }
            }
           .div4{
                  width:100%;
                  display: flex;
//                justify-content: space-between;
                  img{
                      width: 20%;
                  }
                  .aa{
                      width:80%;
                      ul{
                         width:100%;
                         display: flex;
                         justify-content: space-between;
                         li{
                             width:20%;
                             height:300px;
                             display: flex;
                             align-items: center;
                             border-right: 1px solid #ccc;
//                           background: red;
                             img{
                                 width:100%;
                             }
                         }
                      } 
                  }
                  
             }  
              
        }
    }
    .section5{
        width:100%;
        @include Body;
        margin-top: 20px;
        .nav{
            width:90%;
            display: flex;
            .bj{
                width:150px;
                height:40px;
                border:1px solid green;
                display: flex;
                align-items: center;
                font-size: 16px;
                cursor:pointer;
                margin-right:20px;
                p{
                    margin: 0;
                    padding-left:15px;
                    span{
                        color:lawngreen;
                        padding-left:15px;
                    }
                }
            }
            .qx{
                width:150px;
                height:40px;
                border:1px solid green;
                display: flex;
                align-items: center;
                font-size: 16px;
                cursor:pointer;
                margin-right:20px;
                p{
                    margin: 0;
                    padding-left:15px;
                    span{
                        color:lawngreen;
                        padding-left:15px;
                    }
                }
            }
            .te{
                width:400px;
                padding-left:20px;
                border:1px solid green;
            }
            .on{
                width:150px;
                border:1px solid green;
                text-align: center;
                background: green;
                font-size: 18px;
                color:white;
            }
        }
    }
    .section6{
        width:100%;
        height: 40px;
        @include Body;
        margin-top: 30px;
        .nav{
            width:90%;
            height:100%;
            display: flex;
            .nav2{
                width: 890px;
                height:100%;
                display: flex;
                background: #f7f7f7;
                border:1px solid #ccc;
                ul{
                   width:300px;
                   height:40px;
                   display: flex;
                   li{
                      width:100px;
                      height:40px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      }
                 }
                 p{
                   width:100px;
                   display: flex;
                   align-items: center;
                   margin: 0;
                 }
                 img{
                     width:100px;
                     height:35px;
                     margin-left: 382px;
                     margin-top: 2px;
                 }
            } 
        }
    }
    footer{
        border-top:1px solid #ccc;
        width:100%;
        margin-top: 50px;
        background: #fafafa;
        .sect{
            width:75%;
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
            margin-top: 50px;
            border-bottom:1px solid #ccc;
            img{
                width:50px;
                padding-right: 10px;
            }
            dt{
                font-size: 20px;
                color: #888;   
            }
            dd{
                padding-left: 54px;
                line-height: 30px;
                color: #888;
            }
           
        }
         .footer{
                 width:100%;
                 margin-top:40px;
                p{
                    display: flex;
                    justify-content: center;
                    color: #888;
                }
            }
    }
